<template>
  <div class="edit-test-exam-topic">
    <el-form
      class="form"
      :model="editForm"
      ref="editForm"
      label-width="70px"
      :rules="rules"
    >
      <el-form-item label="测试题目名称" label-width="106px" prop="topicName" class="form-item">
        <el-input
          v-model="editForm.topicName"
          type="textarea"
          :rows="3"
          autocomplete="off"
          :clearable="true"
          @input="changeForm"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="选项A"
        label-width="106px"
        prop="topicOptionA"
        class="form-item"
      >
        <el-input
          v-model="editForm.topicOptionA"
          type="textarea"
          :rows="3"
          autocomplete="off"
          :clearable="true"
          @input="changeForm"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="选项B"
        label-width="106px"
        prop="topicOptionB"
        class="form-item"
      >
        <el-input
          v-model="editForm.topicOptionB"
          type="textarea"
          :rows="3"
          autocomplete="off"
          :clearable="true"
          @input="changeForm"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="选项C"
        label-width="106px"
        prop="topicOptionC"
        class="form-item"
      >
        <el-input
          v-model="editForm.topicOptionC"
          type="textarea"
          :rows="3"
          autocomplete="off"
          :clearable="true"
          @input="changeForm"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="选项D"
        label-width="106px"
        prop="topicOptionD"
        class="form-item"
      >
        <el-input
          v-model="editForm.topicOptionD"
          type="textarea"
          :rows="3"
          autocomplete="off"
          :clearable="true"
          @input="changeForm"
        ></el-input>
      </el-form-item>
      <div class="item-div">
        <el-form-item
        label="正确选项"
        label-width="106px"
        prop="topicRightOption"
        class="form-item"
      >
        <el-input
          v-model="editForm.topicRightOption"
          autocomplete="off"
          :clearable="true"
          @input="changeForm"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="题目分值"
        label-width="106px"
        prop="topicScore"
        class="form-item"
      >
        <el-input
          v-model="editForm.topicScore""
          autocomplete="off"
          :clearable="true"
          @input="changeForm"
        ></el-input>
      </el-form-item>
      <el-form-item class="form-item">
        <el-button
          v-show="isShow"
          type="success"
          @click="update"
          :loading="updateLoading"
          >更新</el-button
        >
      </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  getTestExamTopicById,
  updateTestExamTopic,
} from "@/api/admin/testExamTopic";
export default {
  name: "EditTestExamTopicView",
  data() {
    return {
      editForm: {},
      copyForm: {},
      rules: {
        topicName: [
          { required: true, message: "请输入题目名称", trigger: "blur" },
        ],
        topicOptionA: [
          { required: true, message: "请输入选项A", trigger: "blur" },
        ],
        topicOptionB: [
          { required: true, message: "请输入选项B", trigger: "blur" },
        ],
        topicOptionC: [
          { required: true, message: "请输入选项C", trigger: "blur" },
        ],
        topicOptionD: [
          { required: true, message: "请输入选项D", trigger: "blur" },
        ],
        topicRightOption: [
          { required: true, message: "请输入正确答案", trigger: "blur" },
          {
            pattern: /^[ABCD]$/,
            message: "请输入大写的ABCD",
            trigger: "blur",
          },
        ],
        topicScore: [
          { required: true, message: "请输入题目分数", trigger: "blur" },
        ],
      },
      isShow: false,
      updateLoading: false,
    };
  },
  props: ["id", "testExamId"],
  created() {
    this.getTestExamTopicInfo();
  },
  methods: {
    // 检测表单数据是否修改
    changeForm() {
      const objectEqual =
        JSON.stringify(this.editForm) === JSON.stringify(this.copyForm);
      if (!objectEqual) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    // 获取测试分类信息
    async getTestExamTopicInfo() {
      const res = await getTestExamTopicById({
        id: this.id,
        testExamId: this.testExamId,
      });
      this.editForm = Object.assign({}, res.data);
      this.copyForm = Object.assign({}, res.data);
      this.copyForm.topicScore = this.copyForm.topicScore.toString();
    },
    // 更新数据
    update() {
      this.$refs.editForm.validate(async (v) => {
        if (v) {
          try {
            this.updateLoading = true;
            // 转换格式
            this.editForm.topicName = this.editForm.topicName
              .replace(/\r\n/g, "<br/>")
              .replace(/\n/g, "<br/>")
              .replace(/\s/g, "&nbsp;");
            this.editForm.topicOptionA = this.editForm.topicOptionA
              .replace(/\r\n/g, "<br/>")
              .replace(/\n/g, "<br/>")
              .replace(/\s/g, "&nbsp;");
            this.editForm.topicOptionB = this.editForm.topicOptionB
              .replace(/\r\n/g, "<br/>")
              .replace(/\n/g, "<br/>")
              .replace(/\s/g, "&nbsp;");
            this.editForm.topicOptionC = this.editForm.topicOptionC
              .replace(/\r\n/g, "<br/>")
              .replace(/\n/g, "<br/>")
              .replace(/\s/g, "&nbsp;");
            this.editForm.topicOptionD = this.editForm.topicOptionD
              .replace(/\r\n/g, "<br/>")
              .replace(/\n/g, "<br/>")
              .replace(/\s/g, "&nbsp;");
            const res = await updateTestExamTopic(this.editForm);
            // 后退
            this.$router.go(-1);
          } finally {
            this.updateLoading = false;
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.edit-test-exam-topic {
  width: 100%;
  height: 100%;
  .form {
    width: 90%;
    margin: 10px 14px;
    position: relative;
    .form-item {
      width: 500px;
    }
    .item-div {
      position: absolute;
      top: 0;
      right: 0;
      .form-item {
        width: 300px;
      }
    }
  }
}
</style>